<template>
  <div>
    <wxc-tab-page ref="wxc-tab-page"
                  :tab-titles="tabTitles"
                  :tab-styles="tabStyles"
                  :tab-page-height="tabPageHeight"
                  title-type="text">
      <list>
        <cell>
          <wxc-pan-item ext-id="a"
                        @wxcPanItemPan="wxcPanItemPan">
            <div class="container"
                 :style="{height: tabPageHeight}">
              <text class="text-muted">暂无服务商消息</text>
            </div>
          </wxc-pan-item>
        </cell>
      </list>
      <list>
        <cell v-for="(msg, index) in systemMsgs"
              :key="index">
          <wxc-pan-item ext-id="b"
                        @wxcPanItemPan="wxcPanItemPan">
            <div class="msg-item">
              <text class="text-gray mb-1">{{msg.createTime}}</text>
              <text class="mb-1">{{msg.messageContent}}</text>
              <text class="text-muted small">{{msg.realName}}</text>
            </div>
          </wxc-pan-item>
        </cell>
      </list>
    </wxc-tab-page>

  </div>
</template>
<script>
import { WxcTabPage, WxcPanItem, Utils, BindEnv } from 'weex-ui'
import { getStyles } from '../../plugins/tab-page-styles'

export default {
  components: {
    WxcTabPage,
    WxcPanItem
  },
  props: {},
  data() {
    return {
      tabTitles: [
        { title: '服务商消息' },
        { title: '系统消息' }
      ],
      tabStyles: getStyles(),
      systemMsgs: [],
      tabPageHeight: 1334,
      pageIndex: 1,
      totalPages: 1
    }
  },
  computed: {
    showLoadMore() {
      return this.pageIndex < this.totalPages
    }
  },
  watch: {},
  created() {
    this.tabPageHeight = Utils.env.getPageHeight()
    this.getMessage()
  },
  mounted() { },
  methods: {
    wxcPanItemPan(e) {
      if (!BindEnv.supportsEBForAndroid()) { return }
      this.$refs['wxc-tab-page'].bindExp(e.element)
    },
    getMessage() {
      this.$http({
        method: 'GET',
        name: 'auth.my.message',
        data: {
          start: this.pageIndex,
          size: 10,
          type: 1
        },
        errorMsg: '获取消息失败'
      }).then(res => {
        this.totalPages = res && res.totalPages || 0
        this.pageIndex++
        this.systemMsgs = (res && res.data || []).map(msg => {
          msg.createTime = msg.createTime.replace(/\.0$/g, '')
          return msg
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 750px;
  align-items: center;
  padding-top: 200px;
}
.msg-item {
  width: 750px;
  border-bottom-width: 1px;
  border-bottom-color: #e9ecef;
  background-color: #fff;
  padding: 30px;
}
.text-muted {
  color: #999;
}
.text-gray {
  color: #666;
}
.small {
  font-size: 26px;
}
.mb-1 {
  margin-bottom: 10px;
}
.mb-3 {
  margin-bottom: 30;
}
</style>
